London | 26-ITP-May | Shahriar Ahmed | Sprint 2 | Wireframe#1319
London | 26-ITP-May | Shahriar Ahmed | Sprint 2 | Wireframe#1319SABuilds wants to merge 17 commits into
Conversation
… display of elements to be consistent even with page size change on a laptop
…content. changed sizing of images
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
cjyuan
left a comment
There was a problem hiding this comment.
-
Code is free of errors. Good job.
-
Currently the footer content and the article content can overlap, making the text difficult to read. Can you address this issue?
How do I better adjust the sizing of images and changing sizes of grid elements?
I am afraid this question is a bit general and I don't know how to answer it. Have you tried consulting AI?
| footer { | ||
| position: fixed; | ||
| bottom: 0; | ||
| text-align: center; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| border: 1px, solid, black; | ||
| } |
There was a problem hiding this comment.
There is a syntax error in this block of code. Can you fix it?
While https://jigsaw.w3.org/css-validator/ does not work when CSS code contains variables or nested selectors, we can still use it to check the syntax of a single block of CSS code.
Alternatively, you can feed your code to an AI tool to ask it to check for errors or possible improvement.
| <p> | ||
| The purpose of a wireframe is to provide visual understanding for a web page layout. In other words, it shows the layout of webpage so clients can sign off on the layout before any extra creative work goes into it. | ||
| </p> |
There was a problem hiding this comment.
Breaking HTML text into multiple lines helps make the code easier to read, edit, and maintain while preserving the same rendered output.
VS Code formatter could be used to keep our code consistently formatted, including breaking long
lines of HTML text into multiple lines for easier editing and maintenance.
As a best practice, consider following this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.
Please note that code formatters may not work correctly when the source code contains syntax errors.
| <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a> | ||
| </article> | ||
| <article> | ||
| <img src="images.png" alt=""> |
There was a problem hiding this comment.
Providing meaningful alt text is important because it ensures images are accessible to people using screen readers and also helps when images
fail to load, giving users essential context about the content or function of the image.
Can you give a more descriptive alt value to the images?

Learners, PR Template
Self checklist
Changelist
I tried my best to keep to the layout of the wireframe png provided. I wrote articles for each one and provided a link for each article. I also added images I got from the web to meet the requirements listed in the readme.
Questions
How do I better adjust the sizing of images and changing sizes of grid elements?